<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>resource管理</title>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <!-- 引入样式 -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <style>
        .el-row {
            margin-bottom: 20px;
        }

        .el-row:last-child {
            margin-bottom: 0;
        }

        .el-col {

            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <h1>管理<small>resource管理</small></h1>
        <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
            <el-breadcrumb-item>resource管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">
            <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckAllChange" v-model="checkAll">全选
            </el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-row :gutter="60" class="row-bg">
                <el-checkbox-group @change="handleCheckedCitiesChange" v-model="checkedCities">
                    <el-col :span="6" v-for="city in cities">
                        <div class="grid-content bg-purple" style="margin: 20px 0">
                            <el-checkbox
                                    :key="city.resKey"
                                    :label="city.resName" border
                                    style=" border-radius: 4px;width: 100px;height:40px;font-size: larger;line-height: 40px"
                            >{{city.resName}}
                            </el-checkbox>
                        </div>
                    </el-col>


                </el-checkbox-group>

            </el-row>

        </div>
    </div>


</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {

            return {
                tableData: [],
                currentPage: 1,
                total: 10,
                size: 10,
                searchMap: {},
                pojo: {},

                checkAll: false,
                checkedCities: [],
                cities: [],
                isIndeterminate: true,
                resources: []
            }
        },
        created() {
            let id = getQueryString("id");
            this.searchMap.role_id = id;
            this.fetchData();
        },
        methods: {
            fetchData() {
                axios.post(`/resource/findList.do?`, this.searchMap).then(response => {
                    this.cities = response.data
                    // console.log(response.data)
                });
            },
            save() {
                axios.post(`/resource/${this.pojo.id == null ? 'add' : 'update'}.do`, this.pojo).then(response => {
                    this.fetchData(); //刷新列表
                    this.formVisible = false;//关闭窗口
                });
            },
            edit(id) {
                this.formVisible = true // 打开窗口
                // 调用查询
                axios.get(`/resource/findById.do?id=${id}`).then(response => {
                    this.pojo = response.data;
                    // this.imageUrl=this.pojo.image //显示图片  如页面有图片上传功能放开注释
                })
            },
            dele(id) {
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/resource/delete.do?id=${id}`).then(response => {
                        this.fetchData(); //刷新列表
                    })
                })
            },
            /**
             * 复选框函数
             * @param val
             */
            handleCheckAllChange(val) {
                this.checkedCities = val ? this.cities : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }

        }
    })
</script>
</html>
